<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<style type="text/css">
			/* #ZZJ{
				width: 300px;
				height: 300px;
				margin: 0 auto;
				background-color: #00FFFF;
			} */
		</style>
	</head>
	<body>
		<!-- <div id="ZZJ"> -->
		<!-- <ul>
			<li>你是谁啊</li>
			<li>他是谁啊</li>
			<li>我是谁啊</li>
		</ul> -->
		<!-- </div> -->
		<ol>
			<li>你是谁啊</li>
			<li>他是谁啊</li>
			<li>我是谁啊</li>
		</ol>
		<script type="text/javascript">
			$(function() {
				// 优势1
				// $("div").on({
				// 	mouseenter:function(){
				// 		$(this).css("backgroundColor","red");
				// 	},
				// 	click:function(){
				// 		$(this).css("backgroundColor","green");
				// 	}
				// })

				// 优势2
				// 原来的 $("li").click(function(){
				// 		alert("hello,world");
				// })
				//现在的  $("ul").on("click","li",function(){
				// 	alert("hello,world");
				// })
				// 优势3
				$("ol").on("click","li",function(){
					alert("hello,world");
					})
				var li=$("<li>我是后来创建的</li>");
				$("ol").append(li);//点击后来创建的
				
			})
		</script>
	</body>
</html>
